import React, { useState } from 'react'
import "./index.css"
export default function Item({ id, todo, check, todoList, setTodoList }) {
    let [isActive, setIsActive] = useState(false)


    //移入li变色,删除键显示
    const backGroundChange = (bloo) => {
        return () => {
            setIsActive(isActive = bloo)
        }
    }


    //删除事件回调函数
    const deleteOne = () => {
        const newTodoList = todoList.filter(item => item.id !== id)
        return setTodoList(newTodoList)
    }


    //改变表单状态回调函数
    const changeCheck = (e) => {
       const newCheck= todoList.map(item=>{
            if (item.id===id){
                item.check=e.target.checked
            }
            return item
        })
        return setTodoList(newCheck)
    }



    return (
        <li onMouseEnter={backGroundChange(true)} onMouseLeave={backGroundChange(false)} className={isActive ? 'active' : ''}>
            <label>
                <input type="checkbox" onChange={changeCheck} checked={check} />
                <span>{todo}</span>
            </label>
            <button className="btn btn-danger" onClick={deleteOne} style={{ display: isActive ? 'block' : 'none' }}>删除</button>
        </li>
    )
}
